<template>
  <div>
    <div>父组件</div>

    <a-row>
      <a-col :span="8">
        <div v-for="item of blogList" :key="item.id">
          <ComponentChildA
            v-if="item.id <= 3"
            class="childClass"
            @iLikeThis="clickStar"
            :index="item.id"
            :title="item.title"
            :star="item.star"
            :content="item.content"
          >
            我是A组件
          </ComponentChildA>
        </div></a-col
      >
      <a-col :span="8">
        <div v-for="item of blogList" :key="item.id">
          <ComponentChildB
            v-if="item.id > 3"
            class="childClass"
            @iLikeThis="clickStar"
            :index="item.id"
            :title="item.title"
            :star="item.star"
            :content="item.content"
          >
            我是B组件</ComponentChildB
          >
        </div>
      </a-col>
      <a-col :span="8">
        动态组件：
        <div>
          <a-button
            v-for="(item, index) of componentList"
            :key="index"
            @click="changeComponent(item)"
            >{{ item.name }}
          </a-button>
        </div>
        <!-- currentTab 改变时组件也改变 -->
        <Transition mode="out-in" name="fade">
          <component :is="currentTab">{{ currentTabName }}</component>
        </Transition>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ComponentChildA from "./ComponentChildA.vue";
import ComponentChildB from "./ComponentChildB.vue";
import LeftVue from "./LeftVue.vue";
import RightVue from "./RightVue.vue";
import CentreVue from "./CentreVue.vue";
export default {
  components: {
    ComponentChildA,
    ComponentChildB,
    LeftVue,
    CentreVue,
    RightVue,
  },
  data() {
    return {
      componentList: [
        {
          name: "昨天",
          path: "LeftVue",
        },
        {
          name: "今天",
          path: "CentreVue",
        },
        {
          name: "明天",
          path: "RightVue",
        },
      ],
      currentTab: "LeftVue",
      currentTabName: "昨天",
      blogList: [
        {
          id: 1,
          title: "未来",
          content: "到底怎样的结果，才配得上这一路的颠沛流离",
          startNumber: false,
        },
        { id: 2, title: "信仰", content: "十年饮冰，难凉热血 !" },
        {
          id: 3,
          title: "当下",
          content: "没有人可以回到过去，但是谁都可以从现在开始",
          startNumber: false,
        },
        {
          id: 4,
          title: "向往",
          content:
            "生命一直在流逝，向往的东西总要拿东西去交换，你选择用什么交换？还是你已经不再向往？真的么？",
          startNumber: false,
        },
        {
          id: 5,
          title: "拐杖",
          content:
            "一个失明的人一旦恢复了视力，多半会丢掉拐杖，无论这条拐杖用了多少年",
          startNumber: false,
        },
        {
          id: 6,
          title: "落叶",
          content:
            "冬天，大树会丢掉落叶，寒风也会不断嘲讽，待到来年春季，大树生机勃勃，落叶已化为春泥",
          startNumber: false,
        },
        {
          id: 7,
          title: "坏牌",
          content:
            "遇到一个满手都是坏牌的人你就要小心了，因为他想要赢的唯一方法，就是打破游戏规则，你听懂了吗？",
          startNumber: false,
        },
      ],
    };
  },
  methods: {
    changeComponent(item) {
      this.currentTab = item.path;
      this.currentTabName = item.name;
    },
    clickStar(index) {
      this.blogList[index - 1].star = true;
    },
  },
};
</script>

<style>
.childClass {
  margin: 8px 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
